"use client";
import BackButton from "@/components/BackButton";
import { GetSelfTaskDetailQuery, TaskEntity } from "@/queries/task";
import { TeacherEntity } from "@/queries/teacher";
import { useQuery } from "@apollo/client";
import { useRouter } from "next/navigation";
import { useCallback, useMemo } from "react";
import useTask from "../useTask";
const UserTaskPage = ({ params: { id } }: any) => {
  const router = useRouter();
  const { teachers, entity, loading, getTeacherDetail } = useTask(Number(id));

  const onClick = useCallback((teacher: TeacherEntity) => {
    router.push(`/user/${id}/teacher/${teacher.id}/task`);
  }, []);

  if (loading) return <div>Loading...</div>;
  if (!entity) return <div>No task found</div>;

  return (
    <div>
      <BackButton />
      <h1 className="text-2xl font-bold mb-4">{entity.title}</h1>
      <div className="mb-4">
        <h2 className="text-xl font-semibold mb-2">相关教师</h2>
        <ul className="divide-y divide-gray-200">
          {teachers.map((teacher) => {
            const { teacherItem } = getTeacherDetail(teacher.id);

            const isCompleted = !!teacherItem.length;
            return (
              <li
                key={teacher.id}
                className="py-2 flex justify-between items-center cursor-pointer"
                onClick={onClick.bind(null, teacher)}
              >
                <span>{teacher.name}</span>
                <span
                  className={`px-2 py-1 rounded-full text-sm ${
                    isCompleted
                      ? "bg-green-100 text-green-800"
                      : "bg-red-100 text-red-800"
                  }`}
                >
                  {isCompleted ? "已完成" : "未完成"}
                </span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default UserTaskPage;
